<template>
  <view class="container">
    <!-- 汇总卡片 -->
    <view class="summary-card">
      <view class="summary-item">
        <text class="headBlack title-size">一区</text>
        <text class="info">{{oneArea}}</text>
		<!--
		<text class="headBlack">💎 单量</text>
        <view class="info">{{ (Number(agentInfo.enroll_team)+Number(agentInfo.enroll_direct_push)).toFixed(2) }}</view>
		-->
	  </view>
      <view class="summary-item">
		<!--
		<text class="headBlack" style="color: #7e57c2;">总额</text>
		<text class="value" style="color: #7e57c2;">000000</text>
		-->
		<!--
        <text class="headBlack">总额</text>
        <text class="value">{{ (Number(agentInfo.enroll_team)+Number(agentInfo.shop_team)).toFixed(2)}}</text>
		-->
		<text class="headBlack title-size">二区</text>
        <view class="info">{{twoArea}}</view>
      </view>
    </view>

    <!-- 推荐列表 -->
    <view class="recommend-list">
      <block v-for="(item, index) in tableData" :key="index">
        <view class="recommend-card">
          <!-- 用户信息 -->
          <view class="user-info">
            <view class="avatar"></view>
            <view class="user-text">
              <text class="name">{{ item.user.nickName }}</text>
              <text class="id">ID: {{ item.user.identifier_sn }}</text>
              <text class="tel">TEL: {{ item.user.mobile }}</text>
            </view>
            <view class="buttons">
              <view class="button purple" v-if="item.agent.grade && item.agent.grade.grade_id>0">{{ item.agent.grade.name }}</view>
              <view class="button purple-outline" v-else>{{ item.user.grade.name }}</view>
            </view>
          </view>

          <!-- 数据详情 -->
          <view class="user-details">
            <!--<view class="total">总 {{  (Number(item.agent.enroll_direct_push)+Number(item.agent.enroll_team)+Number(item.agent.shop_direct_push)+Number(item.agent.shop_team)).toFixed(2) }}</view>-->
            <view class="details-row">
              <view>
				<!--  
                <text class="details_lib">单量：</text>
                <text class="details_tag">蜜巢 {{ item.agent.enroll_direct_push }}</text>
                <text class="details_tag">蜜罐 {{ item.agent.enroll_team }}</text>
				-->
				<!--直推购物业绩-->
				<text class="details_tag">自购 {{ item.agent.self_right_money }}</text>
              </view>
              <view>
				<!--团队购物业绩-->
				<text class="details_tag">团队业绩 {{ item.agent.team_money }}</text>
				<!--
                <text class="details_lib">购物：</text>
                <text class="details_tag">蜜巢 {{ item.agent.shop_direct_push }}</text>
                <text class="details_tag">蜜罐 {{ item.agent.shop_team }}</text>
				-->
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
 
  </view>
</template>

<script>
export default {
  data() {
    return {
		agentInfo:{},
		direct_push_money:'0.00',
		direct_push_order_number:'0.00',
		teamFirstTotal:0,
		setting: [],
		teamTotal: 0,
		page: 1,
		no_more: false,
		tabList: [],
		list_rows: 15,
		loading: true,
		/*数据列表*/
		tableData: [],
        recommendList: [],
		oneArea:'',
		twoArea:''
    };
  },
  mounted() {
  	/*初始化*/
  	this.init();
  	/*获取数据*/
  	this.getData();
  },
  methods: {
  
  	/*初始化*/
  	init() {
  		let self = this;
  	},
  
  	/*获取数据*/
  	getData() {
  		let self = this;
  		self.loading = true;
  		self._get('plus.agent.team/lists', {
  			level: 1,
  			page: self.page || 1,
  			list_rows: self.list_rows,
  		}, function(res) {
  			self.loading = false;
  			self.teamTotal = res.data.agent.first_num;
			self.teamFirstTotal = res.data.list.total;
			self.direct_push_money = res.data.direct_push_money;
			self.direct_push_order_number = res.data.direct_push_order_number;
			self.agentInfo = res.data.agent;
			self.oneArea = res.data.oneArea;
			self.twoArea = res.data.twoArea;
  			let data = res.data;
  			if (data.setting.level >= 2) {
  				self.tabList.push({
  					value: 2,
  					text: data.words.team.words.second.value,
  					total: data.agent.second_num
  				});
  				self.teamTotal += data.agent.second_num;
  			}
  			if (data.setting.level == 3) {
  				self.tabList.push({
  					value: 3,
  					text: data.words.team.words.third.value,
  					total: data.agent.third_num
  				});
  				self.teamTotal += data.agent.third_num;
  			}
  			self.tableData = self.tableData.concat(data.list.data);
  			self.last_page = data.list.last_page;
  			if (self.last_page <= 1) {
  				self.no_more = true;
  			}
  		}, null, function() {
  			self.loading = false;
  		});
  	},

}
};
</script>

<style scoped>
/* 页面容器 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部 */
.header {
  background-color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

/* 汇总卡片 */
.summary-card {
  background-color: #7e57c2;
  border-radius: 12px;
  margin: 10px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.summary-item {
  text-align: center;
}

.title-size{
	font-size: 18px;
}

.value {
  font-size: 14px;
  font-weight: bold;
  margin: 5px 0;
}

.info {
  font-size: 16px;
  font-weight: bold;
}

/* 推荐列表 */
.recommend-list {
  margin: 10px;
}

.recommend-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  background-color: #ddd;
  border-radius: 50%;
}

.user-text {
  flex: 1;
  margin-left: 10px;
}

.name {
  font-size: 16px;
  font-weight: bold;
  display: block;
}

.id,
.tel {
  font-size: 14px;
  color: #666;
  display: block;
}

.buttons {
  display: flex;
  flex-direction: column;
}

.button {
  text-align: center;
  font-size: 14px;
  margin-bottom: 5px;
  padding: 5px 10px;
  border-radius: 12px;
}

.purple {
  background-color: #7e57c2;
  color: #fff;
}

.purple-outline {
  border: 1px solid #7e57c2;
  color: #7e57c2;
  background-color: transparent;
}

.user-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.total {
  font-size: 16px;
  color: #7e57c2;
  margin-bottom: 5px;
}

.details-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}
.details_lib{
	display: block;
	color: #7e57c2;
}
.details_tag{
	display: block;
}
.headBlack{
	display: block;
}
</style>
